<template>
  <div class="app-container">
    <search-panel :list="searchConfigList" :immediate="true" show-button button-txt="查找" @onSerach="handleSearch" />
    <simple-table-view
      :loading="loading"
      :data-source="dataSource"
      :data-column="dataColumn"
      :page-size="pageSize"
      :data-total="dataTotal"
      :current-page="currentPage"
      @onPageSizeChange="handlePageSizeChange"
      @onPageCurrentChange="handlePageCurrentChange"
    >
      <div slot="age" slot-scope="scope" class="div-age">{{ scope.row.age }}岁</div>
      <div slot="action" slot-scope="scope" class="div-action">
        <el-button size="small" @click="handleModifyItem(scope)">修改</el-button>
        <el-button type="danger" size="small" @click="handleDeleteItem(scope)">删除</el-button>
      </div>
    </simple-table-view>
  </div>
</template>

<script>
import SearchPanel from '@/components/SearchPanel'
import SimpleTableView from '@/components/SimpleTableView/index'

export default {
  components: {
    SearchPanel,
    SimpleTableView
  },
  data() {
    return {
      loading: true,
      searchConfigList: [],
      gradeMap: {
        1: '一年级',
        2: '二年级',
        3: '三年级',
        4: '四年级',
        5: '五年级',
        6: '六年级'
      },
      dataSource: [],
      dataColumn: [],
      dataTotal: 0,
      pageSize: 10,
      currentPage: 1
    }
  },
  beforeDestroy() {
    console.log('mytableview beforeDestroy')
  },
  created() {
    console.log('mytableview created')
    this.searchConfigList = [{
      type: 'Input',
      placeholder: '请输入学号',
      key: 'stuNo',
      value: '2',
      label: '学号'
    }, {
      type: 'Input',
      placeholder: '请输入姓名',
      key: 'stuName',
      value: '3',
      label: '姓名'
    }, {
      type: 'Select',
      placeholder: '请选择年级',
      key: 'grade',
      value: 2,
      label: '年级',
      options: []
      // options: [1, 2, 3, 4, 5, 6].map(i => {
      //   return {
      //     value: i,
      //     label: this.gradeMap[i]
      //   }
      // })
    },
    {
      type: 'TimeRange',
      subType: 'timePicker', // datePicker, timePicker, dateTimePicker分别对应elementui中的日期选择器、时间选择器、日期时间选择器， 默认是datePicker
      startPlaceholder: '请选择开始时间',
      endPlaceholder: '请选择结束时间',
      value: ['2021-02-03 08:06:30', '2021-05-06 15:25:30'],
      // key: 'dateRange', // 将以下两个字段合并为一个字段，用逗号[,]分隔
      startkey: 'startTime',
      endkey: 'endTime',
      label: '时间'
    }]
    this.dataColumn = [{
      key: 'stuNo',
      label: '学号'
    }, {
      key: 'stuName',
      label: '姓名'
    }, {
      key: 'gradeId',
      label: '年级'
    }, {
      key: 'age',
      label: '年龄'
    }, {
      key: 'action',
      label: '操作',
      width: '144px' // 56*2+30
    }]
    this.httpGetData()
  },
  mounted() {
    setTimeout(() => {
      this.searchConfigList[2].options = [1, 2, 3, 4, 5, 6].map(i => {
        return {
          value: i,
          label: this.gradeMap[i]
        }
      })
    }, 2500)
  },
  methods: {
    httpGetData() {
      this.loading = true
      setTimeout(() => {
        // 设置dummy数据
        const arr = []
        for (let i = 0; i < this.pageSize; i++) {
          const idx = this.pageSize * (this.currentPage - 1) + (i + 1)
          const gradeIdx = (i % 7 + 1)
          arr.push({
            id: idx,
            stuName: '学生' + idx,
            gradeId: gradeIdx,
            gradeName: this.gradeMap[gradeIdx],
            age: i,
            gender: i % 2,
            stuNo: idx
          })
        }
        this.dataSource = arr
        this.dataTotal = 1000

        // 结束loading
        this.loading = false
      }, 2000)
    },
    handlePageSizeChange(pageSize) {
      // 修改每页显示条数后，需要切换到第一页
      this.currentPage = 1
      this.pageSize = pageSize
      this.httpGetData()
    },
    handlePageCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.httpGetData()
    },
    handleModifyItem(scope) {
      console.log('handleModifyItem', scope)
    },
    handleDeleteItem(scope) {
      console.log('handleDeleteItem', scope)
    },
    handleSearch(params) {
      console.log('handleSearch', params)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

